<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="inp" />
    <script>
      // 需求: 用户在输入框中,输入内容,则根据用户输入给服务器发送请求
      // 在react里面,给文本框注册的是onchange事件.当用户输入,则事件就触发了
      // 但是在原生的DOM里面,文本如果注册onchange事件,用户输入的时候是不会触发的,只有用户输入完毕,并且文本框失去焦点才会触发

      // 目前这样的实现方式有一个缺点: 只要输入字符或删除字符,就会立刻发送请求.这样的话请求次数太多,服务器压力太大
      // 解决: 防抖
      // 防抖的原理: 当用户输入时,我们不会立刻发送请求,而是延迟一会儿再发(假设2s).当用户输入一个字符之后,开始计时,如果计时结束,用户没有输入则发送请求.如果在计时过程中,用户又输入了,则这一次计时作废,重新计时
      //   inp.oninput = function () {
      //     console.log('假装请求发出去了')
      //   }

      //   防抖实现:

      //1. 项目中可能有很多地方都需要防抖,所以一般防抖的代码会封装成一个函数
      //2. 一般发请求的代码也会封装成一个函数
      function reqFetch() {
        console.log('假装发送请求了')
        console.log(this)
      }
      // func 是具体防抖情况下,计时结束要执行的代码
      // delay 就是防抖情况下,延迟的时间
      function debounce(func, delay) {
        let timer = null //用来存储计时器的id
        return function (e) {
          // 这个函数才是真正的事件处理函数
          // e 就是事件对象
          // this 就是事件源
          clearTimeout(timer)
          timer = setTimeout(() => {
            func.apply(this)
          }, delay)
        }
      }

      inp.oninput = debounce(reqFetch, 1000)
    </script>
  </body>
</html>
